<template>
	<view class="tipsText">
		请选择准确地址
	</view>
	<view class="main" @click="selectAddress">
		<u-form :label-style="labelStyle" :model="form" labelWidth="auto">
			<u-form-item label="省">
				<u-input :custom-style="labelStyle" v-model="form.provinceName" disabled input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="市">
				<u-input :custom-style="labelStyle" v-model="form.cityName" disabled input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="区">
				<u-input :custom-style="labelStyle" v-model="form.areaName" disabled input-align="right"></u-input>
			</u-form-item>
			<u-form-item label="街道/区域">
				<u-input :custom-style="labelStyle" v-model="addressAll" disabled input-align="right"></u-input>
			</u-form-item>
		</u-form>
	</view>
	<view class="submit" @click="submit">保存地址</view>
</template>

<script setup lang="ts">
	import shopApi from '@/api/shop'
	import QQmap from '@/common/qqmap'
	import { computed, onMounted, reactive, ref } from "vue";

	const Maps = ref(null)
	const form = reactive({
		provinceName: '',
		cityName: '',
		areaName: '',
		streetName: '',
		address: '',
		latitude: '',
		longitude: ''
	})
	shopApi.getBuisnessInfo({}).then(res => {
		let list = []
		Object.keys(form).map(item => {
			list.push(item)
		})
		let resObj = JSON.stringify(res.data, list)
		Object.assign(form, JSON.parse(resObj))
	})

	const labelStyle = reactive({
		color: '#c8c9cc'
	})

	const selectAddress = () => {

		uni.chooseLocation({
			success: (res) => {

				form.latitude = res.latitude
				form.longitude = res.longitude
				form.address = res.name

				Maps.value.reverseGeocoder({
					location: {
						latitude:res.latitude,
						longitude:res.longitude
					}
				}).then(res=>{
				    form.provinceName = res.address_component.province
					form.cityName = res.address_component.city
					form.areaName = res.address_component.district
					form.streetName = res.address_component.street

				})
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}

	const submit = () => {
	    uni.showModal({
	    	title:'提示',
			content:'是否保存客户信息',
			showCancel:true,
		    success:(res)=>{
				if(res.confirm){
					shopApi.setBusinessAddress(form).then(res=>{
						uni.showToast({
							title:res.msg,
							success:()=>{
								let time = setTimeout(()=>{
									uni.navigateBack()
									clearTimeout(time)
								},1000)
							}
						})
					})
				}
			}
	    })
	}

	const addressAll = computed(() => {
		return form.streetName + form.address
	})



	onMounted(() => {
		Maps.value = new QQmap()
		Maps.value.init()
	})
</script>

<style lang="scss" scoped>
	.tipsText {
		font-size: 26upx;
		color: #999999;
		padding: 38upx 30upx;
	}

	.main {
		background-color: white;
		border-radius: 32upx;
		overflow: hidden;
		margin: 0 26upx;
		padding: 0 24upx;
	}

	.submit {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100upx;
		width: 560upx;
		border-radius: 90upx;
		height: 82upx;
		background-color: #ffc300;
		color: white;
		box-shadow: 2upx 8upx 16upx rgba(10, 10, 10, .2);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
